<template>
	<view class="wrap item-list">
		<template v-if="itemList.length == 0">
			<u-empty mode="search" class="u-padding-50"></u-empty>
		</template>
		<u-row gutter="16">
			<u-col :span="6" v-for="(item, index) in itemList" :key="index">
				<view class="water-item single-item">
					<u-lazy-load
						@click="openPage('/pages/buy/item', { id: item.id })"
						loading-img="/static/images/loadingImg.png"
						threshold="-450"
						border-radius="10"
						:height="320"
						img-mode="aspectFit"
						:image="item.cover"
						:index="index"
					></u-lazy-load>
					<view class="item-title" @click="openPage('/pages/buy/item', { id: item.id })">
						{{ item.name }}
					</view>
					<!-- 	<view class="item-remark" v-if="item.remark" @click="openPage('/pages/buy/item', { id: item.id })">
							{{ item.remark }}
						</view> -->
					<!-- 	<view class="promotion-info" v-if="item.original_price > 0" @click="openPage('/pages/buy/item', { id: item.id })">
							<view class="original-price">{{ item.original_price }}</view>
						</view> -->
					<view class="item-buy">
						<view class="price">
							￥
							<strong class="value">{{ item.unit_price }}</strong>
						</view>
					</view>
				</view>
			</u-col>
		</u-row>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<wx-share :title="shop.name" :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nav_background: {
				backgroundImage: 'linear-gradient(45deg, rgb(28 79 187), rgb(167 33 33))'
			},
			enableSticky: true,
			keyword: '',
			scrollTop: 0,
			pageTitle: '中勘石油微商城',
			sliders: [],
			currentCategory: 0,
			categories: [],
			paging: {
				sort_type: '',
				page_size: 50,
				current_page: 0,
				keyword: '',
				category_id: 0,
				total_pages: 1
			},
			sortTypes: [
				{
					label: '默认',
					value: 'id.desc'
				},
				{
					label: '价格',
					value: 'price.asc'
				}
			],
			loadStatus: 'loadmore',
			loadText: {
				loadmore: '加载更多',
				loading: '努力加载中',
				nomore: '加载完毕'
			},
			itemList: [],
			shop: {},
			iconMenus: [],
			imageMenus: [],

			articles: [],
			user: {}
		};
	},
	computed: {
		sortTitle() {
			if (this.paging.sort_type === 'id.desc') {
				return '默认';
			}
			if (this.paging.sort_type === 'price.asc') {
				return '价格';
			}
			return '排序';
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.paging.current_page >= this.paging.total_pages) {
			this.loadStatus = 'nomore';
			return;
		}
		this.loadStatus = 'loading';
		this.paging.current_page = ++this.paging.current_page;
		this.getItemList();
	},
	onLoad() {
		// this.getCategories();
		this.getShop();
		this.getSliders();
		this.getIconMenus();
		this.getImageMenus();
		this.getArticleList();
	},
	mounted() {
		this.getItemList();
	},
	onShow() {
		this.enableSticky = true;
		this.getCart();
	},
	onHide() {
		this.enableSticky = false;
	},
	methods: {
		agreementUrl() {
			if (this.shop.user_agreement_id) {
				return '/pages/article/detail?id=' + this.shop.user_agreement_id;
				// return this.openPage('/pages/article/detail',{id:this.shop.user_agreement_id})
			}
			return '/pages/ucp/index';
			// this.openPage('/pages/ucp/index')
		},
		getSliders() {
			this.$u
				.post('/shopping/sliders', {})
				.then((res) => {
					this.sliders = res;
				})
				.catch((e) => {});
		},
		getIconMenus() {
			this.$u
				.post('/shopping/icon-menus', {})
				.then((res) => {
					this.iconMenus = res;
				})
				.catch((e) => {});
		},
		getArticleList() {
			this.$u
				.post('/article/list', this.paging)
				.then((res) => {
					if (res.page.current_page === 1) {
						this.articles = res.list;
					} else {
						this.articles = this.articles.concat(res.list);
					}
					this.paging.current_page = res.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
				})
				.catch((e) => {
					console.log(e);
				});
		},
		getImageMenus() {
			this.$u
				.post('/shopping/image-menus', {})
				.then((res) => {
					this.imageMenus = res;
				})
				.catch((e) => {});
		},
		getShop() {
			this.loading = true;
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					this.shop = res;
					this.loading = false;
				})
				.catch((e) => {});
		},
		getCategories() {
			this.$u
				.post('/category/all', {
					id: 1
				})
				.then((res) => {
					console.log(res);
					const all = [
						{
							id: 0,
							name: '全部'
						}
					];
					this.categories = all.concat(res);
				})
				.catch((e) => {
					console.log(e);
				});
		},
		getItemList() {
			this.$u
				.post('/item/list', {
					page_size: this.paging.page_size,
					current_page: this.paging.current_page,
					category_id: this.paging.category_id,
					name: this.paging.keyword,
					sort: this.paging.sort_type
				})
				.then((res) => {
					if (res.page.current_page === 1) {
						this.itemList = res.list;
					} else {
						this.itemList = this.itemList.concat(res.list);
					}
					this.paging.current_page = res.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
				})
				.catch((e) => {});
		},
		categoryChange(index) {
			this.currentCategory = index;
			for (let i = 0; i < this.categories.length; i++) {
				if (index == i) {
					this.paging.category_id = this.categories[i].id;
					this.paging.current_page = 1;
					this.getItemList();
					break;
				}
			}
		},
		loadMore() {
			console.log('load more');
			if (this.paging.current_page < this.paging.total_pages) {
				this.paging.current_page = this.paging.current_page + 1;
				// this.getItemList();
				this.getArticleList();
			}
		},
		open() {},
		close() {},
		searchItemList() {
			this.paging.current_page = 1;
			this.getItemList();
		},
		changeSort(value) {
			this.paging.sort_type = value;
			this.getItemList();
		},
		openPage(jumpURL, params = {}) {
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		addToCart(itemId) {
			this.$u
				.post('/shopping/add-to-cart', {
					item_id: itemId
				})
				.then((res) => {
					console.log(res);
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					// uni.setTabBarBadge({
					// 	index: 1,
					// 	text: qty.toString()
					// })
				})
				.catch((e) => {});
		},
		getCart() {
			this.$u
				.post('/shopping/cart-list', {})
				.then((res) => {
					console.log(res);
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					// if (qty > 0) {
					// 	uni.setTabBarBadge({
					// 		index: 1,
					// 		text: qty.toString()
					// 	})
					// } else {
					// 	uni.removeTabBarBadge({
					// 		index: 1
					// 	})
					// }
				})
				.catch((e) => {});
		},
		openCheXianForm() {
			location.href = 'https://www.wjx.top/vm/tBmRjfw.aspx';
		}
	}
};
</script>

<style scoped>
page {
	background-color: #ffffff;
}

.wrap-title {
	padding: 15rpx;
	font-size: 38rpx;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #eee;
}

.sticky {
	background-color: #fff;
	box-shadow: 0px 0px 3px 6px rgb(0 0 0 / 20%);
}

.sort_method {
	height: 50rpx;
	background-color: rgb(238, 238, 239);
	padding: 6rpx;
	border-radius: 10rpx;
}

.u-wrap {
	background-color: #fff;
}

.item-title {
	font-size: 28rpx;
	line-height: 1.8;
	/* height: 100rpx; */
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: calc(100vw / 2 - 38px);
	margin-top: 10rpx;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	display: -moz-box;
	-moz-line-clamp: 1;
	-moz-box-orient: vertical;
	overflow-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	overflow: hidden;
}

.item-remark {
	font-size: 26rpx;
	color: #333333;
	font-weight: 300;
	line-height: 1.8;
	/* height: 44rpx; */
	/* margin-bottom: 10rpx; */
	overflow: hidden;
	text-overflow: ellipsis;
}

.original-price {
	color: #333333;
	text-decoration: line-through;
	height: 38rpx;
}

.item-buy {
	display: flex;
	flex-direction: row;
}

.price {
	flex: 1;
	color: red;
}

.price .value {
	font-size: 32rpx;
	font-weight: bold;
}

.price .unit {
	font-weight: 300;
	color: #ccc;
	display: inline;
}

.add-to-cart {
	width: 48rpx;
}

/* .wrap {
		padding: 15px;
		box-sizing: border-box;
	} */
.water-item {
	border-radius: 16rpx;
	margin: 10rpx 0;
	background-color: #fff;
	padding: 16rpx;
	position: relative;
}

.today-sale-off {
	position: absolute;
	font-size: 24rpx;
	top: 0;
	left: 0;
	background-color: rgba(255, 0, 0, 0.6196078431372549);
	color: #fff;
	padding: 10rpx;
	padding-right: 2em;
	/* border-radius: 8px; */
	border-bottom-right-radius: 100%;
	border-top-left-radius: 16rpx;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

.u-demo {
	//height: 200vh;
	height: calc(100% - 44px);
	height: calc(100% - 44px - constant(safe-area-inset-top));
	height: calc(100% - 44px - env(safe-area-inset-top));
}

.wrap {
	padding: 0 10rpx;
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
}

.navbar-right {
	margin-right: 24rpx;
	display: flex;
}

.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}

.right-item {
	margin: 0 12rpx;
	position: relative;
	color: #ffffff;
	display: flex;
}

.message-box {
}

.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
}

.map-wrap {
	display: flex;
	align-items: center;
	padding: 4px 6px;
	background-color: rgba(240, 240, 240, 0.35);
	color: #fff;
	font-size: 22rpx;
	border-radius: 100rpx;
	margin-left: 30rpx;
}

.map-wrap-text {
	padding: 0 6rpx;
}

.u-back-top {
	background-color: rgba(225, 225, 225, 0.56);
}

.image-menu-box {
	display: flex;
}
.image-menu-box .left-side {
	width: 40%;
	padding: 8px;
	box-sizing: border-box;
}
.image-menu-box .right-side {
	flex: 1;
	padding: 8px 8px 8px 0;
}
::v-deep .image-menu .u-grid-item-box {
	padding: 0px 8rpx !important;
}

.u-card-wrap {
	background-color: $u-bg-color;
	padding: 1px;
}

.u-body-item {
	font-size: 32rpx;
	color: #333;
	padding: 20rpx 10rpx;
}

.u-body-item image {
	width: 120rpx;
	flex: 0 0 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-left: 12rpx;
}
</style>
